/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2018-01-11 23:50:58
 * @Last Modified time: 2018-01-11 23:50:58
 * @Description: 描边圆 ---实心圆类似
 *     cxt.arc(x,y,r,startAngle,endAngle,anticlockwise) //anticlockwise:是否逆时针
 *     
 *    步骤：开始步骤。arc()画圆、结束路径、描边操作
 *    一眼就能看出角度：120 * Math.PI / 180
 * 
 *  arc()绘制弧线不使用 closePath()
 * closePath()的作用：关闭路径、连接起点和终点
 */
window.onload = function () {
  var canvas = document.querySelector('.canvas')
  var cxt = canvas.getContext('2d')

  cxt.beginPath()
  cxt.arc(250, 250, 100, 0, Math.PI * 2, true)
  cxt.closePath()
  cxt.strokeStyle = 'Hotpink'
  cxt.stroke()

  cxt.beginPath()
  cxt.arc(250, 150, 100, 0, Math.PI, true)
  cxt.closePath()
  cxt.strokeStyle = 'orange'
  cxt.stroke()

  cxt.beginPath()
  cxt.arc(250,250,200,0,Math.PI,false) // 弧线
  cxt.strokeStyle = 'red'
  cxt.stroke()
}